﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <canvas id="histogramCanvas" width="1000" height="750" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasHistogram = document.getElementById("histogramCanvas"); //绘图区域
        canvasHistogram.width = window.innerWidth;
        canvasHistogram.height = window.innerHeight;
        let paintHistogram = new FCPaint(); //绘图对象
        paintHistogram.canvas = canvasHistogram;
        scaleCanvas(paintHistogram);

        //判断主题色
        paintHistogram.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintHistogram.defaultUIStyle = "light";
        }
        addDefaultEvent(canvasHistogram, paintHistogram);
        //判断移动端
        paintHistogram.isMobile = isMobileMode();
        if (paintHistogram.isMobile) {
            paintHistogram.scaleFactorX = 2.5;
            paintHistogram.scaleFactorY = 2.5;
        }

        //K线视图
        let histogram = new FCChart();
        histogram.dock = "fill";
        //添加到框架
        addView(histogram, paintHistogram);
        //根据主题配色
        if (histogram.paint.defaultUIStyle == "dark") {
            histogram.backColor = "rgb(0,0,0)";
            histogram.borderColor = "rgb(100,100,100)";
            histogram.textColor = "rgb(255,255,255)";
        } else if (histogram.paint.defaultUIStyle == "light") {
            histogram.backColor = "rgb(255,255,255)";
            histogram.borderColor = "rgb(150,150,150)";
            histogram.textColor = "rgb(0,0,0)";
        }
        histogram.visible = true;
        histogram.leftVScaleWidth = 70;
        histogram.rightVScaleWidth = 0;
        histogram.vScaleDistance = 60;
        histogram.hScalePixel = 50;
        histogram.hScaleHeight = 30;
        histogram.candleDivPercent = 1;
        histogram.volDivPercent = 0;
        histogram.indDivPercent = 0;
        histogram.font = "Default,14";
        histogram.data = new Array();
        histogram.cycle = "tick";

        /*
         * 黑色风格
         */
        let toBlack_Chart = function () {
            histogram.paint.defaultUIStyle = "dark";
            histogram.backColor = "rgb(0,0,0)";
            histogram.borderColor = "rgb(100,100,100)";
            histogram.textColor = "rgb(255,255,255)";
            histogram.scaleColor = "rgb(100,100,100)";
            histogram.crossTipColor = "rgb(50,50,50)";
            histogram.crossLineColor = "rgb(100,100,100)";
            histogram.gridColor = "rgba(100,100,100,125)";

        };

        /*
        * 白色风格
        */
        let toWhite_Chart = function () {
            histogram.paint.defaultUIStyle = "light";
            histogram.backColor = "rgb(255,255,255)";
            histogram.borderColor = "rgb(150,150,150)";
            histogram.textColor = "rgb(0,0,0)";
            histogram.scaleColor = "rgb(0,0,0)";
            histogram.crossTipColor = "rgb(220,220,220)";
            histogram.crossLineColor = "rgb(100,100,100)";
            histogram.gridColor = "rgba(0,0,0,125)";
        };

        //判断黑色或白色
        if (histogram.paint.defaultUIStyle == "dark") {
            toBlack_Chart();
        } else if (histogram.paint.defaultUIStyle == "light") {
            toWhite_Chart();
        }

        /*
        * 重写计算最大最小值
        * chart:K线
        */
        paintHistogram.onCalculateChartMaxMin = function (chart) {
            chart.candleMax = 0;
            chart.candleMin = 0;
            chart.volMax = 0;
            chart.volMin = 0;
            chart.indMin = 0;
            chart.indMin = 0;
            if (chart.data && chart.data.length > 0) {
                let lastValidIndex = chart.lastVisibleIndex;
                if (chart.lastValidIndex != -1) {
                    lastValidIndex = chart.lastValidIndex;
                }
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    let total = chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3
                        + chart.data[i].data4 + chart.data[i].data5 + chart.data[i].data6;
                    if (i == chart.firstVisibleIndex) {
                        chart.candleMax = total;
                        chart.candleMin = 0;
                    } else {
                        if (chart.candleMax < total) {
                            chart.candleMax = total;
                        }
                    }
                }
            }
        };

        //定义颜色
        let drawColors = new Array();
        drawColors.push("rgb(59,174,218)");
        drawColors.push("rgb(185,63,150)");
        drawColors.push("rgb(219,68,83)");
        drawColors.push("rgb(246,187,67)");
        drawColors.push("rgb(216,112,173)");
        drawColors.push("rgb(140,192,81)");

        /*
        * 重写计算最大最小值
        * chart:K线
        */
        paintHistogram.onPaintChartStock = function (chart, paint, clipRect) {
            if (chart.data && chart.data.length > 0) {
                let lastValidIndex = chart.lastVisibleIndex;
                if (chart.lastValidIndex != -1) {
                    lastValidIndex = chart.lastValidIndex;
                }
                for (let i = chart.firstVisibleIndex; i <= lastValidIndex; i++) {
                    let x = getChartX(chart, i);
                    let y1 = getChartY(chart, 0, chart.data[i].data1);
                    let zeroY = getChartY(chart, 0, 0);
                    let dWidth = chart.hScalePixel / 3;
                    paint.fillRect(drawColors[0], x - dWidth, y1, x + dWidth, zeroY);
                    let y2 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2);
                    paint.fillRect(drawColors[1], x - dWidth, y2, x + dWidth, y1);
                    let y3 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3);
                    paint.fillRect(drawColors[2], x - dWidth, y3, x + dWidth, y2);
                    let y4 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3 + chart.data[i].data4);
                    paint.fillRect(drawColors[3], x - dWidth, y4, x + dWidth, y3);
                    let y5 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3 + chart.data[i].data4 + chart.data[i].data5);
                    paint.fillRect(drawColors[4], x - dWidth, y5, x + dWidth, y4);
                    let y6 = getChartY(chart, 0, chart.data[i].data1 + chart.data[i].data2 + chart.data[i].data3 + chart.data[i].data4 + chart.data[i].data5 + chart.data[i].data6);
                    paint.fillRect(drawColors[5], x - dWidth, y6, x + dWidth, y5);
                    if (chart.paint.defaultUIStyle == "dark") {
                        paint.drawRect("rgb(255,255,255)", 1, 0, x - dWidth, y6, x + dWidth, zeroY);
                        if (chart.crossStopIndex == i) {
                            paint.fillRect("rgba(0,0,0,50)", x - dWidth, y6, x + dWidth, zeroY);
                        }
                    } else if (chart.paint.defaultUIStyle == "light") {
                        paint.drawRect("rgb(0,0,0)", 1, 0, x - dWidth, y6, x + dWidth, zeroY);
                        if (chart.crossStopIndex == i) {
                            paint.fillRect("rgba(255,255,255,50)", x - dWidth, y6, x + dWidth, zeroY);
                        }
                    }
                }
            }
        };

        /*
        * 重写绘制线条的函数
        * chart:K线
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintHistogram.onPaintChartCrossLine = function (chart, paint, clipRect) {
            if (!chart.data || chart.data.length == 0) {
                return;
            }
            let candleDivHeight = getCandleDivHeight(chart);
            let volDivHeight = getVolDivHeight(chart);
            let indDivHeight = getIndDivHeight(chart);
            let crossLineIndex = chart.crossStopIndex;
            if (crossLineIndex == -1) {
                crossLineIndex = chart.lastVisibleIndex;
            }
            let str = "A" + crossLineIndex;
            if (str == "ANaN") {
                crossLineIndex = chart.lastVisibleIndex;
            }
            let drawTitles = new Array();
            drawTitles.push("项目1 " + chart.data[crossLineIndex].data1.toFixed(chart.candleDigit));
            drawTitles.push("项目2 " + chart.data[crossLineIndex].data2.toFixed(chart.candleDigit));
            drawTitles.push("项目3 " + chart.data[crossLineIndex].data3.toFixed(chart.candleDigit));
            drawTitles.push("项目4 " + chart.data[crossLineIndex].data4.toFixed(chart.candleDigit));
            drawTitles.push("项目5 " + chart.data[crossLineIndex].data5.toFixed(chart.candleDigit));
            drawTitles.push("项目6 " + chart.data[crossLineIndex].data6.toFixed(chart.candleDigit));

            let iLeft = chart.leftVScaleWidth + 5;
            for (let i = 0; i < drawTitles.length; i++) {
                let tSize = paint.textSize(drawTitles[i], chart.font);
                paint.drawText(drawTitles[i], drawColors[i], chart.font, iLeft, 5);
                iLeft += tSize.cx + 5;
            }
        };

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvasHistogram.width = document.documentElement.clientWidth;
            canvasHistogram.height = document.documentElement.clientHeight;
            scaleCanvas(paintHistogram);
            updateViewDefault(paintHistogram.views);
            resetChartVisibleRecord(histogram);
            checkChartLastVisibleIndex(histogram);
            calculateChartMaxMin(histogram);
            invalidate(paintHistogram);
        };

        /*
         * 监听大小改变
         */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };
        updateViewDefault(paintHistogram.views);
        invalidate(paintHistogram);

        /*
        * 插入模拟数据
        */
        let insertData = function () {
            let data = new SecurityData();
            data.close = 0;
            data.date = Date.now();
            data.data1 = Math.random() * 100 - 50;
            data.data2 = Math.random() * 100 - 50;
            data.data3 = Math.random() * 100 - 50;
            data.data4 = Math.random() * 100 - 50;
            data.data5 = Math.random() * 100 - 50;
            data.data6 = Math.random() * 100 - 50;
            if (data.data1 < 0) {
                data.data1 = 0;
            }
            if (data.data2 < 0) {
                data.data2 = 0;
            }
            if (data.data3 < 0) {
                data.data3 = 0;
            }
            if (data.data4 < 0) {
                data.data4 = 0;
            }
            if (data.data5 < 0) {
                data.data5 = 0;
            }
            if (data.data6 < 0) {
                data.data6 = 0;
            }
            histogram.data.push(data);
            resetChartVisibleRecord(histogram);
            checkChartLastVisibleIndex(histogram);
            paintHistogram.onCalculateChartMaxMin(histogram);
            invalidateView(histogram);
        };

        //启动秒表
        setInterval(insertData, 200);
    </script>
    <br />
    <br />
    <br />
</body>
</html>
